<template>
  <div class="box">
    <header class="header">
      <van-nav-bar title="详情" left-arrow @click-left="$router.back()" />
    </header>
    <main class="content">
<div><img :src="detailIf.image" alt=""></div>
<div>{{ detailIf.title }}</div>
<div>{{ detailIf.price }}</div>
    </main>
  </div>
  <footer class="tive">
    <van-action-bar>
  <van-action-bar-icon icon="chat-o" text="客服" dot />
  <van-action-bar-icon icon="cart-o" text="购物车" badge="5" @click="$router.push('/cart')" />
  <van-action-bar-icon icon="shop-o" text="店铺" badge="12" />
  <van-action-bar-button type="warning" text="加入购物车" @click="addIt" />
  <van-action-bar-button type="danger" text="立即购买" />
</van-action-bar>
  </footer>
</template>

<script setup>
import request from '@/tool/request'
import {ref,onMounted} from 'vue'
const detailIf=ref({})
import { useRoute } from 'vue-router';
const route=useRoute()
import { useCounterStore } from '@/stores/counter'
// 可以在组件中的任意位置访问 `store` 变量 ✨
const store = useCounterStore()
onMounted(()=>{
  request.get('/detail',{
    params:{
id:route.params.id
    }
  }).then(res=>{
    if(res.data.code==200){
      detailIf.value=res.data.data
    }
  })
})
const addIt=()=>{
store.addItem(detailIf.value)
}
</script>

<style lang="scss" scoped></style>